<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5语义标签示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; line-height: 1.6; }
    header, nav, main, aside, section, article, footer { padding: 20px; margin: 10px; border-radius: 4px; }
    header { background-color: #f0f4f8; }
    nav { background-color: #e9ecef; }
    main { background-color: #ffffff; }
    aside { background-color: #f8f9fa; }
    section { background-color: #f1f3f5; margin-bottom: 15px; }
    article { background-color: #ffffff; padding: 15px; margin: 10px 0; border: 1px solid #dee2e6; }
    footer { background-color: #343a40; color: white; text-align: center; }
    .container { max-width: 1200px; margin: 0 auto; display: flex; }
    .content { flex: 3; }
    .sidebar { flex: 1; }
    nav ul { list-style: none; display: flex; gap: 20px; }
    nav a { text-decoration: none; color: #333; }
  </style>
</head>
<body>
  <!-- 页面头部：包含网站标题、Logo等 -->
  <header>
    <h1>我的博客网站</h1>
    <p>分享前端开发知识与经验</p>
  </header>

  <!-- 导航栏：页面导航链接 -->
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">技术文章</a></li>
      <li><a href="#">资源下载</a></li>
      <li><a href="#">关于我</a></li>
    </ul>
  </nav>

  <!-- 页面主体内容 -->
  <div class="container">
    <!-- 主要内容区域 -->
    <main class="content">
      <!-- 文章列表 section -->
      <section>
        <h2>最新文章</h2>
        
        <!-- 单篇文章 article -->
        <article>
          <h3>HTML5语义标签的优势</h3>
          <p>发布时间：2023-10-01 | 分类：前端基础</p>
          <p>HTML5语义标签通过明确的名称（如header、article）使页面结构更清晰，不仅便于开发者维护，还能提升搜索引擎对内容的理解...</p>
          <a href="#">阅读全文 →</a>
        </article>

        <article>
          <h3>CSS Flex布局实战</h3>
          <p>发布时间：2023-09-25 | 分类：CSS技巧</p>
          <p>Flex布局是现代前端开发中常用的布局方式，通过灵活的对齐和分布规则，能快速实现响应式页面设计...</p>
          <a href="#">阅读全文 →</a>
        </article>
      </section>

      <!-- 推荐资源 section -->
      <section>
        <h2>推荐学习资源</h2>
        <p>以下是前端开发必备的在线资源，涵盖文档、工具和教程：</p>
        <ul>
          <li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a> - 权威的Web开发文档</li>
          <li><a href="https://www.w3schools.com" target="_blank">W3Schools</a> - 交互式编程教程</li>
        </ul>
      </section>
    </main>

    <!-- 侧边栏：辅助信息 -->
    <aside class="sidebar">
      <h3>关于博主</h3>
      <p>专注前端开发5年，擅长HTML5、CSS3、JavaScript等技术栈。</p>
      
      <h3>热门标签</h3>
      <div>
        <span style="background: #e9ecef; padding: 5px 10px; border-radius: 15px; margin: 5px; display: inline-block;">#HTML5</span>
        <span style="background: #e9ecef; padding: 5px 10px; border-radius: 15px; margin: 5px; display: inline-block;">#CSS3</span>
        <span style="background: #e9ecef; padding: 5px 10px; border-radius: 15px; margin: 5px; display: inline-block;">#JavaScript</span>
      </div>
    </aside>
  </div>

  <!-- 页脚：版权信息、联系方式等 -->
  <footer>
    <p>© 2023 我的博客网站 | 联系方式：contact@example.com</p>
  </footer>
</body>
</html>